<template>
  <div class="collect">
    <!-- 有数据时就渲染 -->
    <div v-if="collectData.length">
      <!-- 遍历 collectData，渲染数据 -->
      <div class="swap" v-for="(data, index) in collectData" :key="data.id">
        <!-- 显示数据信息 -->
        <div class="schedule">
          <!-- Circle 环形进度条组件 -->
          <van-circle
            layer-color="#ebedf0"
            v-model="currentRate[index]"
            :rate=data.schedule*100/data.money
            :speed="100"
            :text="(data.schedule*100/data.money) < 50 ? Math.ceil(data.schedule*100/data.money) + '%' : Math.floor(data.schedule*100/data.money) + '%'"
            :color="gradientColor"
          />
          <!-- 显示标题等信息 -->
          <div class="mes">
            <p class="title">{{ data.title }}</p>
            <span class="date">{{ data.date }}</span>
            <p class="message">{{ data.message }}</p>
          </div>
        </div>
        <!-- 显示当前进度 -->
        <div class="data">
          <!-- 已完成 -->
          <div @click="handleData(data.id)">
            <p class="leftTop">已完成</p>
            <p class="leftBottom">{{ Number(data.schedule).toFixed(2) }}</p>
          </div>
          <!-- 目标 -->
          <div>
            <p>目标</p>
            <p class="rightBottom">{{ data.money }}</p>
          </div>
        </div>
        <!-- 显示完成 -->
        <div v-if="currentRate[index] === 100" class="compulted">已完成目标</div>
        <!-- 显示超时未完成 -->
        <div v-else-if="dateString[index] < nowDate" class="uncompulted">目标未完成</div>
      </div>
    </div>
    <!-- 没有数据时显示 -->
    <van-empty
      v-else
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="暂无存钱目标"
    />
  </div>
</template>

<script>
export default {
  name: 'collect',
  created () {
    // 未登录时不渲染数据
    if (!this.$store.state.username) return
    // 获取当前账号的数据
    this.collectData = this.$store.state.userInfo.filter(user => user.username === this.$store.state.username)[0].collectData
    // 根据数据填满 currentRate 用于动画
    this.collectData.forEach(data => {
      this.currentRate.push(0)
    })
    // 将最终数据填入 currentRate 中
    this.collectData.forEach(data => {
      this.currentRate.push(data.schedule * 100 / data.money)
    })
    // 将日期填入 date 中
    this.collectData.forEach(data => {
      this.date.push(data.date)
    })
    // 将时间转为对应的字符串，方便比较时间的先后
    this.date.forEach(item => {
      this.dateString.push(item.split('/').map(item => {
        if (item < 10) return '0' + item
        else return item
      }).join(''))
    })
    // 将日期转化为一个可以比较大小的数字
    this.nowDate = new Date().toLocaleDateString().split('/').map(item => {
      if (item < 10) return '0' + item
      else return item
    }).join('')
  },
  /**
   * collectData 存钱计划数据
   * currentRate 当前进度最大为100
   * gradientColor 环形进度条的渐变色
   * date 时间
   * dateString 时间字符串
   * nowDate 现在的时间
   */
  data () {
    return {
      collectData: [],
      currentRate: [],
      gradientColor: {
        '0%': '#3fecff',
        '100%': '#6149f6',
      },
      date: [],
      dateString: [],
      nowDate: '',
    }
  },
  methods: {
    // 点击当前进度时跳转
    handleData (id) {
      this.$router.push({
        name: 'modifyCollectData',
        params: {
          id,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.swap{
  // background: #f7f8fa;
  background: white;
  margin-bottom: 10px;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
}
.schedule{
  height:120px;
}
.van-circle{
  float: left;
  width:50%;
  margin-top: 10px;
}
.mes{
  float: left;
  width: 50%;
}
.title{
  font-size: 18px;
  font-weight: bold;
  width: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 20px;
  margin: 0;
  margin-top: 26px;
}
.date{
  font-size: 14px;
}
.message{
  font-size: 12px;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.data{
  height: 80px;
}
.data>div{
  width: 187px;
  float: left;
  text-align: center;
  font-size: 14px;
}
.leftTop{
  color:#888;
}
.leftBottom{
  border-right: 1px solid #999;
}
.rightBottom{
  color:blue;
}
.uncompulted{
  position: absolute;
  top: 10px;
  right: -10px;
  color: #aaa;
  font-size: 12px;
  border: 1px solid #aaa;
  transform: rotateZ(45deg);
}
.compulted{
  position: absolute;
  top: 10px;
  right: -10px;
  color: red;
  font-size: 12px;
  border: 1px solid #f00;
  transform: rotateZ(45deg);
}
</style>
